<template>
    <div>
        <Card>
            <p slot="title" class="card-title">
                <Icon type="md-locate" style="margin-right: 5px"></Icon>
                访问用户分布
            </p>
            <Row type="flex" justify="center" align="middle" style="height: 273px">
                <apexchart type="donut" width="350" :options="chartOptions" :series="series" />
            </Row>
        </Card>
    </div>
</template>

<script>
export default {
    name: 'visitSeparation',
    data() {
        return {
            series: [],
            chartOptions: {
                labels: ['移动端', 'PC', '平板', 'IOS', '其他'],
                plotOptions: {
                    pie: {
                        donut: {
                            size: '70%'
                        }
                    }
                },
                dataLabels: {
                    enabled: false
                },
                legend: {
                    position: 'right'
                }
            }
        };
    },
    methods: {
        init() {
            this.series = [45, 18, 27, 15, 13];
        }
    },
    mounted() {
        this.init();
    }
};
</script>
